/*
  学习目标：useEffect - 监听多个状态的建议
  1. 多个依赖项 [msg,msg2,msg3]
  2. 写多个 useEffect 分别监听也可以

  写法选择建议：
  按照业务功能走，同一个业务功能，就写在一个 useEffect 中
*/
import React, { useEffect, useState } from 'react';

export default function App() {
  const [msg, setMsg] = useState('我是初始msg');
  const [msg2, setMsg2] = useState('我是初始msg2');
  const handleChange = (e) => {
    // this.setState({msg:})
    setMsg2(e.target.value);
  };

  // 监听多个依赖项
  useEffect(() => {
    console.log('修改文档标题业务 -----> ');
    document.title = msg + msg2;
  }, [msg, msg2]);

  useEffect(() => {
    console.log('打印msg业务 -----> ', msg);
  }, [msg]);

  useEffect(() => {
    console.log('打印msg2业务 -----> ', msg2);
  }, [msg2]);

  return (
    <>
      {/* 定义方法再绑定 */}
      <input type="text" value={msg2} onChange={handleChange} />
      {/* 页面上直接绑定方法 */}
      <input
        type="text"
        value={msg}
        onChange={(e) => {
          setMsg(e.target.value);
        }}
      />
    </>
  );
}
